<template>
	<div class="breedSisterDetail">
		<!--保姆详情-->
		<div class="small-hiddle" style="background-color: #f7f7f7;width: 100%;">
			<Row type="flex" align="middle" justify="center" style="height: 40px;">
				<Col  style="width: 1200px;text-align: left;padding-left: 10px;">
					<span>
						<span>首页</span>
						<span>></span>
						<span>育儿嫂</span>
						<span>></span>
						<span>育儿嫂详情</span>
					</span>
				</Col>
			</Row>
		</div>
		<div style="width: 100%;background-color: #f7f7f7;">
			<div  class="body-card">
				<Row style="padding: 10px;" >
					<Col  style="padding: 10px;" :xs="24" :lg="5">
						<img style="width: 100%;" src="../../../../static/img/card_example.png"/>
					</Col>
					<Col  style="padding: 10px 20px;" :xs="24" :lg="19">
						<div>
							<p style="font-size: 25px;">刘阿姨</p>
							<div style="padding: 5px 0px;">
								<span style="font-size: 16px;">
									<span>50岁</span>
									<span>&emsp;|&emsp;</span>
									<span>福建</span>
									<span>&emsp;|&emsp;</span>
									<span>8年服务经验</span>
								</span>
							</div>
							<div style="padding: 5px 0px;">
								<span style="font-size: 16px;">
									<span><Icon style="color: #f09a04;" type="md-checkmark-circle" />&nbsp;实名认证</span>
									<span>&emsp;&emsp;</span>
									<span><Icon style="color: #f09a04;" type="md-checkmark-circle" />&nbsp;证件备案</span>
									<span>&emsp;&emsp;</span>
									<span><Icon style="color: #f09a04;" type="md-checkmark-circle" />&nbsp;专业培训</span>
									<span>&emsp;&emsp;</span>
									<span><Icon style="color: #f09a04;" type="md-checkmark-circle" />&nbsp;技能考核</span>
								</span>
							</div>
							<div style="height: 1px;width: 100%;background-color: #f7f7f7;margin: 15px 0px;"></div>
							<div style="padding: 5px 0px;">
								<span style="font-size: 22px;font-weight: bold;">
									期望薪资：5500~6000元/月
								</span>
							</div>
							<div style="padding: 10px 0px;">
								<Button type="warning" style="width: 120px;height: 45px;">预约面试</Button>
							</div>
						</div>
					</Col>
				</Row>
			</div>
			<div class="body-card" >
				<div style="height: 20px;width: 100%;background-color: #f7f7f7;"></div>
				<img style="width: 100%;" src="../../../../static/img/breedSister/breedSister_01.png"/>
				<img style="width: 100%;" src="../../../../static/img/breedSister/breedSister_02.png"/>
				<img style="width: 100%;" src="../../../../static/img/breedSister/breedSister_03.png"/>
				<img style="width: 100%;" src="../../../../static/img/nurse_detail/nurse_detail_05.png"/>
			</div>
			
			
			
			
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				
			}
		},
		methods:{
			
		}
	}
</script>

<style lang="css" scoped>
	/** 电脑 **/
	
	@media only screen and (min-width: 540px){
		.breedSisterDetail >>> .body-card{
			width: 1200px;
			margin: 0 auto;
			background-color: white;
		}
		.breedSisterDetail >>> .serve-font-title{
			font-size: 25px;
			padding: 5px;
		}
		.breedSisterDetail >>> .serve-font-text{
			font-size: 15px;
			padding: 5px;
		}
		.breedSisterDetail >>> .big-hiddle{
			display: none !important;	
		}
		.breedSisterDetail >>> .ivu-tabs-nav .ivu-tabs-tab-active{
			color: #009a00 !important;
		}
		.breedSisterDetail >>> .ivu-tabs-ink-bar{
			background-color: #009a00 !important;
		}
		.breedSisterDetail >>> .ivu-tabs-nav .ivu-tabs-tab:hover{
			color: #009a00 !important;
		}
		.breedSisterDetail >>> .ivu-card-head{
			padding: 7px 16px;
		    text-align: left !important;
		    background-color: #f7f7f7 !important;
		}
		.breedSisterDetail >>> .body-card-info-left{
			padding: 15px 40px;
			font-size: 16px;
		}
		.breedSisterDetail >>> .body-card-type{
			padding: 40px;
		}
		.breedSisterDetail >>> .body-card-type-info{
			height: 80px;
			border-right: 1px solid #b5b5b5;
			font-size: 25px;
			background-color: #F7F7F7;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.breedSisterDetail >>> .body-card-type-text{
			height: 80px;
			font-size: 20px;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
		}
		.breedSisterDetail >>> .body-card-info-text{
			text-align: left;
			height: 40px;
			/*line-height: 40px;*/
			font-size: 18px;
		}

	}
	/** 手机 **/
	@media only screen and (max-width: 540px) {
		.breedSisterDetail >>> .small-hiddle{
			display: none !important;	
		}
		.breedSisterDetail >>> .body-card{
			width: 100%;
			background-color: white;
		}
		.breedSisterDetail >>> .serve-font-title{
			font-size: 15px;
			padding: 5px;
		}
		.breedSisterDetail >>> .serve-font-text{
			font-size: 12px;
			padding: 5px;
		}
		.breedSisterDetail >>> .ivu-tabs-nav .ivu-tabs-tab-active{
			color: #009a00 !important;
		}
		.breedSisterDetail >>> .ivu-tabs-ink-bar{
			background-color: #009a00 !important;
		}
		.breedSisterDetail >>> .ivu-tabs-nav .ivu-tabs-tab:hover{
			color: #009a00 !important;
		}
		.breedSisterDetail >>> .ivu-card-head{
			padding: 7px 16px;
		    text-align: left !important;
		    background-color: #f7f7f7 !important;
		}
		.breedSisterDetail >>> .body-card-info-left{
			padding: 5px 5px;
			font-size: 16px;
		}
		.breedSisterDetail >>> .body-card-type{
			padding: 5px;
		}
		.breedSisterDetail >>> .body-card-type-info{
			height: 80px;
			border-right: 1px solid #b5b5b5;
			font-size: 16px;
			background-color: #F7F7F7;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.breedSisterDetail >>> .body-card-type-text{
			height: 80px;
			font-size: 14px;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
		}
		.breedSisterDetail >>> .body-card-info-text{
			text-align: left;
			height: 40px;
			
			font-size: 13px;
		}
	}
</style>